<template>
    <!-- 只对包含有效子菜单(类型为0)的项渲染为sub-menu -->
    <el-sub-menu
      v-if="hasValidChildMenu"
      :index="menu.id.toString()"
      class="custom-submenu"
    >
      <template #title>
        <component
          :is="iconComponent"
          v-if="iconComponent"
          class="icon"
        ></component>
        <span>{{ menu.menuName }}</span>
      </template>
  
      <!-- 只递归渲染有效子菜单 -->
      <menu-item
        v-for="subMenu in validChildMenus"
        :key="subMenu.id"
        :menu="subMenu"
      />
    </el-sub-menu>
  
    <!-- 没有有效子菜单且是菜单类型的情况 -->
    <el-menu-item 
      v-else-if="menu.type === '0'" 
      :index="menu.url"
    >
      <component
        :is="iconComponent"
        v-if="iconComponent"
        class="icon"
      ></component>
      <span>{{ menu.menuName }}</span>
    </el-menu-item>
  </template>
  
  <script setup>
  import { computed } from "vue";
  import {
    Camera,
    Delete,
    Edit,
    Tickets,
    CircleClose,
    DocumentDelete,
    Setting,
    Picture,
    Plus,
    Refresh,
    Menu,
    User,
    Folder,
    Upload,
    Help,
    Tools,
    Opportunity,
    Share,
    FolderOpened,
    Postcard,
    DocumentAdd,
    RefreshLeft,
    Promotion,
  } from "@element-plus/icons-vue";
  
  const props = defineProps({
    menu: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  });
  
  // 筛选出有效的子菜单（类型为0的才是导航菜单）
  const validChildMenus = computed(() => {
    if (!Array.isArray(props.menu.childMenu)) {
      return [];
    }
    // 只保留类型为菜单(type:0)的子项
    return props.menu.childMenu.filter(item => item.type === '0');
  });
  
  // 判断是否有有效的子菜单
  const hasValidChildMenu = computed(() => {
    return validChildMenus.value.length > 0;
  });
  
  const iconComponents = {
    "el-icon-camera": Camera,
    "el-icon-delete": Delete,
    "el-icon-edit": Edit,
    "el-icon-tickets": Tickets,
    "el-icon-circle-close": CircleClose,
    "el-icon-document-delete": DocumentDelete,
    "el-icon-setting": Setting,
    "el-icon-picture": Picture,
    "el-icon-plus": Plus,
    "el-icon-refresh": Refresh,
    "el-icon-menu": Menu,
    "el-icon-user-solid": User,
    "el-icon-folder": Folder,
    "el-icon-upload": Upload,
    "el-icon-user": User,
    "el-icon-help": Help,
    "el-icon-s-tools": Tools,
    "el-icon-s-opportunity": Opportunity,
    "el-icon-share": Share,
    "el-icon-folder-opened": FolderOpened,
    "el-icon-postcard": Postcard,
    "el-icon-document-add": DocumentAdd,
    "el-icon-refresh-left": RefreshLeft,
    "el-icon-s-promotion": Promotion,
  };
  
  const iconComponent = computed(() => {
    return iconComponents[props.menu.icon] || null;
  });
  </script>
  
  <style scoped>
  .icon {
    margin-right: 8px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
  
  .el-sub-menu__title span,
  .el-menu-item span {
    font-size: 14px;
    vertical-align: middle;
  }
  
  .el-sub-menu .el-menu {
    padding-left: 10px;
  }
  
  /* 强制隐藏无子菜单的箭头 - 最后的保障 */
  .custom-submenu:not(.has-children) .el-sub-menu__icon-arrow {
    display: none !important;
  }
  
  </style>